<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 头部结构 -->
        <TreeTools :node-data="company" root @openDialog="openDialogFn" />

        <!-- 组织架构的树 -->
        <!-- el-tree 组件内部 props: ['data', 'props'] -->
        <!--
          el-tree
           data 树形数据
           props 控制将来展示树形结构读取的字段名
           default-expand-all 默认展开所有子节点

          el-tree 组件内部 一定有  <slot name='default' :node="xxx" :data="xxxx" /> { node: xxx, data: xxxx }
         -->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 这个插槽用于渲染每一个树形节点的结构 -->
          <!--
            node: 偏底层一点的节点信息对象 数据特别多
            data: 当前这个树节点在departs的部门信息
           -->
          <template #default="{ data }">
            <!-- <p>{{ data.name }} {{ data.manager }}</p> -->
            <!-- 树形节点的宽度默认由内容撑开 -->
            <TreeTools
              :node-data="data"
              @openEditDialog="openEditDialogFn"
              @openDialog="openDialogFn"
              @refresh="getDepartments"
            />
            <!-- <TreeTools :nodeData="data"/> -->
          </template>
        </el-tree>
      </el-card>

      <AddDept
        ref="addDept"
        :dept-list="deptList"
        :node-data="nodeData"
        :is-show.sync="isShow"
        @refresh="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
import { reqGetDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils'

export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // list 树形数据
      // 1. 每一个孩子都是一个对象 对象中label 表示描述文本
      // 2. 每一个孩子都可能有自己的孩子们 children  一定是个数组
      // 3. label必须有 children可以没有
      departs: [], // 树形数据
      deptList: [], // 列表式数据
      defaultProps: {
        // children: 'children',
        label: 'name'
      },
      // 公司
      company: { name: '传智播客', manager: '负责人', id: '' },
      isShow: false,
      nodeData: {}, // 用于存储将来添加子部门的父部门的信息 / 用于存储将来编辑部门的信息
      loading: false
    }
  },
  created() {
    this.getDepartments()

    // ....
  },
  methods: {
    // fn() {
    //   this.getDepartments()
    // },
    // 用到很多次
    async getDepartments() {
      // 开启loading
      this.loading = true

      // await new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve()
      //   }, 2000)
      // })

      // 以后如果想要让代码等一会再执行
      // 1. 直接延时器
      // 2. 封装promise
      //    2.1  .then
      //    2.2  await

      const { data } = await reqGetDepartments()
      // console.log(res)
      // this.departs = data.depts
      // data.depts 列表式的数据 转换树形数据
      this.deptList = data.depts
      const res = transListToTreeData(data.depts, '')
      // console.log(res, 8877)
      // this.company.id = ''
      this.departs = res
      // this.departs = transListToTreeData(data.depts, '1175311373083017216')
      // transListToTreeData(list, '') 获取你想要查找的部门们
      this.company.name = data.companyName // 处理一下

      // 关闭loading
      this.loading = false
    },
    // closeDialogFn(flag) {
    //   this.isShow = flag
    // },
    openDialogFn(obj) {
      // 显示弹层
      this.isShow = true

      // 显示弹层后 在这里发请求 => 父组件中 要调用 子组件中的一个方法 => ref
      // this.$refs.form.validate()
      // this.$refs.addDept.getSimpleUserList()

      // console.log(obj)
      this.nodeData = obj

      // 在这里能改子组件的数据
      // this.$refs.addDept.title = '添加子部门'
    },
    openEditDialogFn(obj) {
      // 显示
      this.isShow = true
      // 存储将来编辑的部门信息
      this.nodeData = obj

      // 在这里能改子组件的数据
      // this.$refs.addDept.title = '编辑部门'
      // this.$refs.addDept.getSimpleUserList()
      this.$refs.addDept.getDepartDetail(obj.id)
    }
  }
}
</script>

<style lang='scss' scoped>
.el-tree {
  // 样式穿透性
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
